import Component from '@glimmer/component';
import { action } from '@ember/object';
import { service } from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class WaterConfigComponent extends Component {
  @service message;
  @service call;

  @tracked currentHue = 0;
  @tracked saturation = 100;
  @tracked lightness = 50;
  @tracked currentItem;

  constructor() {
    super(...arguments);
    if (this.args.chooseItem) {
      this.currentItem = this.args.chooseItem;
      const hsl = this.rgbToHsl(
        this.currentItem.colorR,
        this.currentItem.colorG,
        this.currentItem.colorB,
      );
      this.currentHue = hsl.h;
      this.saturation = hsl.s;
      this.lightness = hsl.l;
    }
  }

  get colorList() {
    let steps = 24;
    return Array.from({ length: steps }, (_, i) => ({
      hue: (i * 360) / steps,
      hsl: `hsl(${(i * 360) / steps}, ${this.saturation}%, ${this.lightness}%)`,
    }));
  }

  hslToRgb(h, s, l) {
    s /= 100;
    l /= 100;

    const k = (n) => (n + h / 30) % 12;
    const a = s * Math.min(l, 1 - l);
    const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));

    return [
      Math.round(f(0) * 255),
      Math.round(f(8) * 255),
      Math.round(f(4) * 255),
    ];
  }

  rgbToHsl(r, g, b) {
    // 将RGB值归一化到[0, 1]
    const [rp, gp, bp] = [r, g, b].map((c) => c / 255);

    // 计算最大值、最小值和差值
    const max = Math.max(rp, gp, bp);
    const min = Math.min(rp, gp, bp);
    const delta = max - min;

    let h = 0;
    let s = 0;
    const l = (max + min) / 2;

    // 当不是灰色时计算色相和饱和度
    if (delta !== 0) {
      s =
        l > 0.5
          ? delta / (2 - max - min) // 亮度高时的饱和度计算
          : delta / (max + min); // 亮度低时的饱和度计算

      // 计算色相
      switch (max) {
        case rp:
          h = ((gp - bp) / delta) * 60;
          break;
        case gp:
          h = ((bp - rp) / delta + 2) * 60;
          break;
        case bp:
          h = ((rp - gp) / delta + 4) * 60;
          break;
      }

      // 确保色相在0-360之间
      if (h < 0) h += 360;
    }

    // 四舍五入并转换为百分比
    return {
      h: Math.round(h),
      s: Math.round(s * 100),
      l: Math.round(l * 100),
    };
  }

  get hexValue() {
    const [r, g, b] = this.hslToRgb(
      this.currentHue,
      this.saturation,
      this.lightness,
    );
    return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`;
  }

  get rgbRValue() {
    const [r, g, b] = this.hslToRgb(
      this.currentHue,
      this.saturation,
      this.lightness,
    );
    return r;
  }

  get rgbGValue() {
    const [r, g, b] = this.hslToRgb(
      this.currentHue,
      this.saturation,
      this.lightness,
    );
    return g;
  }

  get rgbBValue() {
    const [r, g, b] = this.hslToRgb(
      this.currentHue,
      this.saturation,
      this.lightness,
    );
    return b;
  }

  @action
  updateSaturation(event) {
    this.saturation = event.target.value;
  }

  @action
  updateHue(hue) {
    this.currentHue = hue;
  }

  @action
  updateLightness(event) {
    this.lightness = event.target.value;
  }

  @action
  submit() {
    let item = this.call.getFormData('watermarkItem');
    this.args.chooseColor(item);
  }
}
